<template>
	<view class="viewWrap">
		<u-navbar title="积分记录" title-color="#1f1f1f" back-icon-color="#1f1f1f" :background="background"></u-navbar>
		<view class="flex-col page">
			<view class="flex-col list">
				<view class="flex-col list-item mt-15" v-for="(item, index) in recordList" :key="index">
					<view class="flex-row justify-between items-center group">
						<!-- <text class="font">{{item.title}}</text> -->
						<view class="flex-row items-center list-lf">
							<image class="shrink-0 image_3" :src="commonData.exchangeRecordsData.yuekaIcon" />
							<text class="font_3 ml-6-5">{{item.title}}</text>
						</view>
						<text class="font_2 text_2">{{item.create_at}}</text>
					</view>
					<view class="flex-row justify-between items-center group_2">
						<!-- <view class="flex-row items-center list-lf">
							<image class="shrink-0 image_3" src="https://terminator.axu9.com/images/yueka-icon.png" />
							<text class="font_3 ml-6-5">{{item.title}} {{item.type == 0 ? '+' : '-'}}{{item.num}}</text>
						</view> -->
						<text class="font">时间：{{item.duration}}秒</text>
						<text class="font_4 text_3 flex-row justify-end">积分{{item.num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		integralLog
	} from "@/api/user.js"
	export default {
		data() {
			return {
				items: [null, null, null, null, null],
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				recordList: [
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// },
					// {
					// 	createTime: '2023-08-18 09:43:36',
					// 	second: 60,
					// 	title: '视频标题',
					// 	yuNum: 70
					// }
				],
				page: 1, //分页 当前页数
				totalPage: 0, //分页 总页数
				commonData: {}
			}
		},
		onLoad() {
			this.getData();
			this.commonData = commonData;
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			getData() {
				integralLog({
					uid: uni.getStorageSync("userId"),
					page: this.page,
					type: 5
				}).then(res => {
					console.log(res, '积分记录')
					if (res.errno == 0) {
						this.totalPage = res.data.last_page;
						this.recordList = [...this.recordList,...res.data.data];
					}
				}).catch(err => {

				})
			}
		},
		onReachBottom() {
			console.log('到底了')
			if(this.page < this.totalPage ){
				this.page ++;
				this.getData();
			}else {
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			}
		}
	}
</script>
<style>
	
</style>
<style lang="scss" scoped>
	@import url(../../static/css/common.css);

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-6-5 {
		margin-left: 13rpx;
	}

	.viewWrap {
		background-color: #f5f5f5;
		/* background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%); */
		background-image: linear-gradient(181deg, $add-audio-option-btn-bg-rg 0%, $add-audio-option-btn-bg-lf 100%);
		background-size: 100% 578rpx;
		background-repeat: no-repeat;
	}

	.page {
		/* padding-bottom: 541rpx;
		background-color: #f5f5f5; */
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 28rpx 30rpx 436rpx;
		background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%);
	}

	.image {
		margin-left: 36rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.image_2 {
		width: 16rpx;
		height: 28rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.list {
		/* margin-top: -403rpx; */
		padding: 0 30rpx;
		padding-bottom: 40rpx;
	}

	.list-item {
		padding-left: 36rpx;
		padding-right: 16rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group {
		padding: 31rpx 0 20rpx;
		border-bottom: dashed 1rpx #536074;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #666666;
	}

	.font_2 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #666666;
	}

	.text_2 {
		margin-right: 12rpx;
	}

	.group_2 {
		padding: 23rpx 3rpx 26rpx;
	}

	.image_3 {
		width: 34rpx;
		height: 34rpx;
	}

	.list-lf {
		flex: 0.6;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #222222;
		width: 90%;
		word-break: break-all;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		/* width: 90%; */
		color: $theme-color;
		flex: 0.4;
	}

	.text_3 {
		margin-right: 3rpx;
	}
</style>